import 'package:common_utils/common_utils.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:yp/config/config.dart';
import 'package:yp/helper.dart';
import 'package:yp/router.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class MallVerificationCodeLoginPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MallVerificationCodeLoginPage();
  }
}

class _MallVerificationCodeLoginPage
    extends State<MallVerificationCodeLoginPage> {
  final MallVerificationCodeLoginLogic logic =
      Get.put(MallVerificationCodeLoginLogic());
  final MallVerificationCodeLoginState state =
      Get.find<MallVerificationCodeLoginLogic>().state;

  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.dark,
      child: Scaffold(
        body: GetBuilder<MallVerificationCodeLoginLogic>(
          builder: (logic) {
            return ListView(
              padding: EdgeInsets.zero,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height,
                  padding: EdgeInsets.symmetric(horizontal: setWidth(40)),
                  child: Column(
                    //mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            // 关闭
                            GestureDetector(
                              onTap: () {
                                Get.back();
                              },
                              child: Padding(
                                padding: EdgeInsets.only(top: setWidth(80)),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.end,
                                  children: [
                                    Image.asset(
                                      'assets/images/close_images.png',
                                      width: setWidth(50),
                                      height: setWidth(50),
                                      fit: BoxFit.fill,
                                    ),
                                  ],
                                ),
                              ),
                            ),
                            // 登录/注册
                            Padding(
                                padding: EdgeInsets.only(
                                  top: setWidth(150),
                                  bottom: setWidth(100),
                                ),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text('登录/注册',
                                        style: TextStyle(
                                            fontSize: 30,
                                            fontWeight: FontWeight.w800)),
                                    Padding(
                                      padding: EdgeInsets.only(top: 10),
                                      child: Text('手机验证登录，新号码自动注册'),
                                    )
                                  ],
                                )),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                TextField(
                                  controller: state.phoneTextController,
                                  focusNode: state.phoneFocusNode,
                                  maxLines: 1,
                                  style: TextStyle(
                                    color: Color(0xff222222),
                                    fontSize: 16,
                                  ),
                                  onChanged: (value) {
                                    logic.textControllerClick();
                                  },
                                  keyboardType: TextInputType.phone,
                                  decoration: InputDecoration(
                                    contentPadding: EdgeInsets.symmetric(
                                        vertical: setWidth(36)),
                                    hintText: '请输入手机号',
                                    prefixIcon: Container(
                                      width: setWidth(130),
                                      height: setWidth(40),
                                      child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: [
                                          Text(
                                            '+86',
                                            style: TextStyle(
                                              color: Color(0xff222222),
                                              fontSize: 14,
                                            ),
                                          ),
                                          Padding(
                                            padding: EdgeInsets.only(
                                                right: setWidth(40)),
                                            child: Container(
                                              width: setWidth(2),
                                              height: setWidth(32),
                                              color: Color(0xffeeeeee),
                                            ),
                                          ),
                                        ],
                                      ),
                                    ),
                                    hintStyle: TextStyle(
                                      color: Color(0xffD2D2D2),
                                      fontSize: 16,
                                    ),
                                    enabledBorder: UnderlineInputBorder(
                                      borderSide:
                                          BorderSide(color: Color(0xffEEEEEE)),
                                    ),
                                    focusedBorder: UnderlineInputBorder(
                                      borderSide:
                                          BorderSide(color: Color(0xffEEEEEE)),
                                    ),
                                  ),
                                ),
                                TextField(
                                  controller: state.passwordTextController,
                                  focusNode: state.passwordFocusNode,
                                  maxLines: 1,
                                  style: TextStyle(
                                    color: Color(0xff222222),
                                    fontSize: 16,
                                  ),
                                  onChanged: (value) {
                                    logic.textControllerClick();
                                  },
                                  keyboardType: TextInputType.phone,
                                  decoration: InputDecoration(
                                    contentPadding: EdgeInsets.symmetric(
                                        vertical: setWidth(36)),
                                    hintText: '请输入验证码',
                                    suffixIcon: Container(
                                      width: setWidth(180),
                                      alignment: Alignment.centerLeft,
                                      child: GestureDetector(
                                        onTap: () {
                                          print(
                                              '++++++++++++++++++ 获取验证码点击事件 ++++++++++++++++++');
                                          if (!RegexUtil.isMobileSimple(
                                              state.phoneTextController.text)) {
                                            toast("手机号格式错误");
                                            return;
                                          }
                                          if (state.phoneTextController.text
                                                  .length >
                                              0) {
                                            if (logic.state.seconds > 0 &&
                                                logic.state.seconds < 60) {
                                              return;
                                            }
                                            logic.state.seconds = 59;
                                            logic.sendSms();
                                          } else {
                                            toast('请输入手机号');
                                          }
                                        },
                                        child: Container(
                                          width: setWidth(180),
                                          height: setWidth(60),
                                          decoration: BoxDecoration(
                                            borderRadius: BorderRadius.circular(
                                                setWidth(10)),
                                            border: Border.all(
                                              width: setWidth(1),
                                              color: Color(0xffe1e1e1),
                                            ),
                                          ),
                                          alignment: Alignment.center,
                                          child: Text(
                                            state.verifyStr,
                                            style: TextStyle(
                                              color: Color(0xff717171),
                                              fontSize: 13,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ),
                                    hintStyle: TextStyle(
                                      color: Color(0xffD2D2D2),
                                      fontSize: 16,
                                    ),
                                    enabledBorder: UnderlineInputBorder(
                                      borderSide:
                                          BorderSide(color: Color(0xffEEEEEE)),
                                    ),
                                    focusedBorder: UnderlineInputBorder(
                                      borderSide:
                                          BorderSide(color: Color(0xffEEEEEE)),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            // 手机登录
                            Padding(
                              padding: EdgeInsets.only(
                                top: setWidth(100),
                                bottom: setWidth(40),
                              ),
                              child: GestureDetector(
                                onTap: () {
                                  if (state.loginBool) {
                                    logic.onSubmit();
                                  }
                                },
                                child: Container(
                                  height: setWidth(90),
                                  decoration: BoxDecoration(
                                    color: Color(0xffEA5504).withOpacity(1.0),
                                    borderRadius:
                                        BorderRadius.circular(setWidth(45)),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '登录/注册',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    Config.ShowLoginPageLeftTip=true;
  }

  @override
  void dispose() {
    Config.ShowLoginPageLeftTip=false;
    super.dispose();
  }
}
